<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .container{
            margin:0 auto;
            width: 500px;
            border: 1px #ccc solid;
            margin-bottom: 20px;
        }
        .box1{
            margin-left: -20px;
            /* margin-top: -10px; *//* margin-top为负值不会增加高度，只会产生向上位移 */
            margin-bottom: -10px;/* margin-bottom为负值不会产生位移，会减少自身的供css读取的高度 */
        }

        .clearfix::before,
        .clearfix::after {
            content: " ";
            display: table;
        }
        .clearfix::after {
            clear: both;
        }
        .flb{
            float: left;
            width: 100px;
            height: 100px;
            margin-left: -25px;
        }
        .flbox1{
            background-color: rgba(33, 114, 214, 0.8);
        }
        .flbox2{
            background-color: rgba(255, 82, 0, 0.8);
        }
        .flbox3{
            background-color: rgba(90, 243, 151, 0.8);
            /* margin-left: -200px; */
        }

        .box2{
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
            margin: 0 auto;
        }
        .absolute{
            position: absolute;
            top:50%;
            left:50%;
            height: 200px;
            width: 200px;
            background-color: #ccc;
            /* margin-top: -100px;
            margin-left: -100px; */
            transform: translate3d(-50%,-50%,0); /* 使用translate3d可以开启GPU加速，就不用cpu去从新计算所有点素位置，开启GPU加速后，GPU自动将这个元素放在一个新的“层”，直接偏移这个“层”来提高渲染速度（个人理解，若有错误欢迎指正）。 */
        }
    </style>
    <title>负margin</title>
</head>
<body>
    <!-- http://www.jianshu.com/p/549aaa5fabaa1 -->
    <!-- 一、margin为负值产生的影响
    
    对于自身的影响
    
    当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度 -->
    <div class="container">
        <div class="box1">
            I dont have the width
        </div>
    </div>

    <hr>

    <!-- 对浮动元素的影响 -->
    <div class="container clearfix">
        <div class="flb flbox1">box1</div>
        <div class="flb flbox2">box2</div>
        <div class="flb flbox3">box3</div>
    </div>

    <hr>

    <!-- 对绝对定位影响（最常用） -->
    <div class="box2">
            <div class="absolute"></div>
    </div>
</body>
</html>